<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <div id="title">
      <button data-url="/music">音乐</button>
      <button data-url="/movie">电影</button>
      <button data-url="/news">新闻</button>
    </div>
    <div id="view"></div>
  </div>
  <script>
    const obtn = document.querySelectorAll("#title button")
    const oview = document.getElementById("view")
    const routes = [{
        path: "/music",
        content: "最屌的作品"
      },
      {
        path: "/movie",
        content: "独行月球"
      },
      {
        path: "/news",
        content: "炸鱼"
      }
    ]

    // 给所有的button绑定点击事件,修改地址栏的地址
    for (let i = 0; i < obtn.length; i++) {
      obtn[i].onclick = function () {
        history.pushState(null, null, this.dataset.url)

        routes.forEach((route) => {
          if(route.path === this.dataset.url){
            oview.textContent = route.content
          }
        })
      }
    }

    // 通过hashchange监视url中hash值的变化
    window.onpopstate = function () {
      routes.forEach((route) => {
        if (route.path === location.pathname) {
          oview.textContent = route.content
        }
      })
    }
  </script>
</body>

</html>